<template>
  <div>
    <div>
      <el-form class="form-box" :inline="true">
        <el-form-item label="相册名称">
          <el-input
            v-model="filter.albumName"
            placeholder="输入相册名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-select
            v-model="filter.isOpen"
            placeholder="选择是否公开"
            clearable
          >
            <el-option label="公开" :value="1"></el-option>
            <el-option label="不公开" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="相册拥有者">
          <el-input
            v-model="filter.owner"
            placeholder="输入相册拥有者姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="records" class="w-full">
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="相册头像">
        <template #default="scope">
          <img class="w-20 h-20" :src="scope.row.albumHead" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="albumName" label="相册名称" />
      <el-table-column prop="owner" label="拥有者" />

      <el-table-column label="是否审核">
        <template #default="scope">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="scope.row.isApprove"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </template>
      </el-table-column>

      <el-table-column label="是否公开">
        <template #default="scope">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="scope.row.isOpen"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="共享编辑">
        <template #default="scope">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="scope.row.shareEdit"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="共享发布">
        <template #default="scope">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="scope.row.shareUpload"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="容量">
        <template #default="scope">
          {{ scope.row.albumSize }}/{{ scope.row.totalSize }}
        </template>
      </el-table-column>
      <el-table-column prop="expireTime" label="容量到期时间" width="180px" />
      <el-table-column fixed="right" label="操作" width="300px">
        <template #default="scope">
          <el-button type="primary" @click="viewDetail(scope.row)"
            >查看</el-button
          >
          <el-button type="success" @click="editDetail(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除该相册？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="delDetail(scope.row)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-2">
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="filter.pageNum"
        :default-page-size="filter.pageSize"
        :total="total"
        @prev-click="getList"
        @next-click="getList"
        @current-change="getList"
      />
    </div>
    <el-dialog v-model="viewDialog" title="查看相册详情">
      <el-form class="form-box" v-if="itemDetail">
        <el-form-item label="相册封面">
          <img :src="itemDetail.albumCover" class="w-20 h-20" alt="" />
        </el-form-item>
        <el-form-item label="相册描述">
          {{ itemDetail.albumDesc }}
        </el-form-item>
        <el-form-item label="相册头像">
          <img :src="itemDetail.albumHead" class="w-20 h-20" alt="" />
        </el-form-item>
        <el-form-item label="相册名称">
          {{ itemDetail.albumName }}
        </el-form-item>
        <el-form-item label="容量(G)">
          {{ itemDetail.albumSize }}/{{ itemDetail.totalSize }}
        </el-form-item>
        <el-form-item label="页面标题	">
          {{ itemDetail.albumTitle }}
        </el-form-item>
        <el-form-item label="是否审核">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="itemDetail.isApprove"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="itemDetail.isOpen"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </el-form-item>
        <el-form-item label="共享编辑">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="itemDetail.shareEdit"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </el-form-item>
        <el-form-item label="共享发布">
          <el-icon
            class="bg-green-300 flex justify-center items-center !w-6 !h-6"
            v-if="itemDetail.shareUpload"
            ><Check
          /></el-icon>
          <el-icon
            class="bg-gray-300 flex justify-center items-center !w-6 !h-6"
            v-else
            ><Close
          /></el-icon>
        </el-form-item>
        <el-form-item label="相册拥有者">
          {{ itemDetail.ownerName }}
        </el-form-item>
        <el-form-item label="分享图片">
          <img :src="itemDetail.shareImg" class="w-20 h-20" alt="" />
        </el-form-item>
        <el-form-item label="分享标题">
          {{ itemDetail.shareTitle }}
        </el-form-item>
        <el-form-item label="相册水印">
          <img :src="itemDetail.watermark" class="w-20 h-20" alt="" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="editDialog" header="编辑相册" @close="handleClose">
      <el-form class="form-box" v-if="editItemForm">
        <el-form-item label="相册描述">
          <el-input v-model="editItemForm.albumDesc"></el-input>
        </el-form-item>
        <el-form-item label="相册名称">
          <el-input v-model="editItemForm.albumName"></el-input>
        </el-form-item>
        <el-form-item label="总容量(G)">
          <el-input-number v-model="editItemForm.totalSize"></el-input-number>
        </el-form-item>
        <el-form-item label="是否审核">
          <el-switch
            v-model="editItemForm.isApprove"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-switch
            v-model="editItemForm.isOpen"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="共享编辑">
          <el-switch
            v-model="editItemForm.shareEdit"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="共享发布">
          <el-switch
            v-model="editItemForm.shareUpload"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUpdate">保存</el-button>
          <el-button @click="editDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getAlbumList, getAlbumDetail, updateAlbum } from "@/apis/album";
import { Close, Check } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const records = ref<AlbumItem[]>([]);
const total = ref(1);
const filter = reactive<AlbumFilter>({
  pageNum: 1,
  pageSize: 10,
});
const editDialog = ref(false);
const viewDialog = ref(false);
const getList = async () => {
  const res = await getAlbumList(filter);
  records.value = res.list;
  total.value = res.total;
};
const search = () => {
  filter.pageNum = 1;
  getList();
};
onMounted(() => {
  getList();
});

const itemDetail = ref<AlbumDetail>();
const viewDetail = async (row: AlbumItem) => {
  viewDialog.value = true;
  getDetail(row.albumId);
};
const getDetail = async (albumId: number) => {
  const res = await getAlbumDetail(albumId);
  itemDetail.value = res;
  setEditData(res);
};
const setEditData = (value: AlbumDetail) => {
  editItemId.value = value.albumId;
  editItemForm.value = {
    albumDesc: value.albumDesc,
    albumName: value.albumName,
    isApprove: value.isApprove,
    isOpen: value.isOpen,
    shareEdit: value.shareEdit,
    shareUpload: value.shareUpload,
    totalSize: value.totalSize,
  };
};
const editItemForm = ref<AlbumPatchData>();
const editItemId = ref<number>();
const editDetail = (row: AlbumItem) => {
  getDetail(row.albumId);

  editDialog.value = true;
};
const saveUpdate = async () => {
  if (editItemId.value && editItemForm.value) {
    await updateAlbum(editItemId.value, editItemForm.value);
    ElMessage.success("保存成功");
    editDialog.value = false;
    getList();
  }
};
const handleClose = () => {
  editItemId.value = undefined;
  editItemForm.value = undefined;
};
const delDetail = (row: AlbumItem) => {};
</script>

<style scoped>
.el-input {
  --el-input-width: 220px;
}
.el-form-item {
  /* width: 45%; */
}
</style>
